<template>
    <div class="ads-dtData-content">
        <div class="scoll-view">
            <div class="ads-left-con">
                <div class="name">
                    {{dtData.adPlaceTitle}}
                    <span v-if="type==2 && dtData.placeStatus==2" @click="lookVideo">
                        Advertising in progress
                    </span>
                </div>
                <div class="introduce">
                    {{dtData.adPlaceIntroduce}}
                </div>
                <div class="place-view">
                    <img :src="dtData.adArImg" />
                    <div>
                        <div class="city-title" v-t="'detail.title14'">Belonging City</div>
                        <div class="city-name">{{dtData.adAdress}}</div>
                    </div>
                </div>
            
                <div class="user-view">
                        <div class="item">
                            <div class="title" v-t="'detail.title1'">TITLE HOLDING</div>
                            <div class="dtname">{{dtData.adPlaceOwnerName}}</div>
                        </div>
                        <div class="line"></div>
                        <div class="item">
                            <div class="title" v-t="'detail.title2'">EARNINGS HOLDING</div>
                            <div class="dtname">{{dtData.adPlaceLesseeName}}</div>
                        </div>
                    </div>


                <div class="max-title" v-t="'detail.title3'">Ad Slot Traffic</div>
                <div class="ads-visits-box">
                    <uv-pv-visits v-if="dtData.adPlaceId" :id="dtData.adPlaceId" visitType='6'/>
                </div>
            </div>
            <div class="ads-right-con" v-if="requestOver">
                
                <template v-if="dtData.placeStatus==1">
                 <div class="weitou-view" >
                     <div class="title" v-t="'detail.title10'">Advertising Space CPC Payment Rules</div>
                            <div class="item">
                                <span>Bond</span>
                                <em>{{dtData.deposit.standardString || '0.00'}} <span>CXT</span></em>
                            </div>
                            <div class="item">
                                <span>CPC</span>
                                <em>{{dtData.uvPrice==null?'0.00':(dtData.uvPrice.standardString || '0.00')}} <span>CXT</span></em>
                            </div>
                     </div>
                </template>
                <template v-if="type==2">
                    <user-ads-con :detail='dtData'/>
                </template>
                <template v-else>
                    <released ref="addView" v-if="dtData.placeStatus==2" :detail='dtData'/>
                    <not-released ref="addView" v-else :detail='dtData'/>
                </template>
   
                   <div class="btn-lnieview" >
                     <div :class="'btn-add '+lang"  @click="btnAdd"></div>
                       <!-- adPlaceOwnerWallet 广告位持有人钱包	  adPlaceLesseeWallet 广告位承租人钱包	受益人 --> 
                     <!-- <div class="btn-setUp" 
                     v-if="dtData.adPlaceLesseeWallet!=null&&userInfo.walletAddress.toLowerCase()==dtData.adPlaceLesseeWallet.toLowerCase()"
                     @click="btnSetUp" 
                      ></div> -->
                    <!-- lesseeStatus	出租状态：1未出租，2已出租  adPlaceOwnerWallet	广告位持有人钱包		-->
                     <!-- <div class="btn-usufruct" 
                     v-if="dtData.lesseeStatus==1&&dtData.adPlaceLesseeWallet!==null&&dtData.adPlaceLesseeWallet.toLowerCase()==userInfo.walletAddress.toLowerCase()"
                      @click="btnUsufruct"></div>

                     <div class="cancel-usufruct" 
                     v-if="dtData.lesseeStatus==2&&dtData.adPlaceLesseeWallet!=null&&dtData.adPlaceLesseeWallet.toLowerCase()==userInfo.walletAddress.toLowerCase()" 
                      @click="cancelUsufruct"></div> -->
                </div>
            </div>
          
        </div>

        <div class="popup-view" v-if="popupType">
            <div class="title" v-t="'release.setText4'">
                You are applying for ad serving, please select your ad serving period:
            </div>
            <ul>
                <li @click="checkList(1)"><i :class="{'on':popupCheck==1}" /><span v-t="'release.setText5'">7 Days A Week</span></li>
                <li  @click="checkList(2)"><i :class="{'on':popupCheck==2}" /><span v-t="'release.setText6'">31 Days Per Month</span></li>
            </ul>
            <div class="btn-view">
                <div class="btn-confim" @click="popupConfim"></div> 
                <div class="btn-cancel" @click="cancelConfim"></div>
            </div>
         </div>
    </div>
</template>

<script>
import { reactive,toRefs,ref,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Title from '@/components/title.vue'
import twoTitle from '@/components/twoTitle.vue'
import imgBox from '@/components/imgBox.vue'
import chainInfo from '@/components/chainInfo.vue'
import released from './released.vue'
import notReleased from './notReleased.vue'
import userAdsCon from './userAdsCon.vue'
import uvPvVisits from '@/components/uvPvVisits.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       Title,
       twoTitle,
       imgBox,
       chainInfo,
       released,
       notReleased,
       uvPvVisits,
       userAdsCon
    },
    props:{
        detail:Object,
        id:'',
        type:{
            type:Number,
            default:1 // 1全球广告位详情，2广告位详情
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const addView = ref(null);
        const {proxy} = getCurrentInstance()
        const {t,locale} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            dtData:props.detail, // 
            chainInfo:'',
            requestOver:false,
            popupType:false,
            popupCheck:1,
            lang:'en'
        })

        onMounted(()=>{
            state.lang = locale.value
            if(props.id){
                store.dispatch('ad/get_adspace_detail',props.id).then(res=>{
                    state.dtData = res.data
                    state.requestOver = true
                     //广告位-添加PV PV ,访问量
                     if(res.data.records.length>0){
                         res.data.records.map((item)=>{
                            store.dispatch('ad/add_ad_place_pv',{
                                adPlaceId:props.id,
                                adPlaceJobRecordId:item.adPlaceJobRecordId,
                                walletAddress:state.userInfo.walletAddress || ''
                            }) 
                            state.dtData.adPlaceJobRecordId=item.adPlaceJobRecordId
                         })
                     }else{
                          store.dispatch('ad/add_ad_place_pv',{
                                adPlaceId:props.id,
                                walletAddress:state.userInfo.walletAddress || ''
                            }) 
                     }   
                })
                // 2022-11-24
                // store.dispatch('ad/get_ads_chain_info',props.id).then(res=>{
                //  const cdata = res.data || {}
                //     if(res.success && res.data){
                //         state.chainInfo = {
                //             ownerName:cdata.adPlaceOwnerName || '',
                //             ownerSuccessTime:cdata.handleTime || '',
                //             chainName:cdata.chainName || '',
                //             tokenId:cdata.bornId || '',
                //             contractAddress:cdata.contractAddress || '',
                //             tokenStandard:cdata.tokenStandard || ''
                //         }
                //     }else{
                //         state.chainInfo = ''
                //     }
                // })
              
            }
        })

        const formatAddress = (str)=>{
            if(str){
                const srt1 = str.substr(0,8)
                const srt2 = str.substr(str.length-8,8)
                return srt1+'......'+srt2
            }else{
                return ''
            }
        }

        const lookVideo = ()=>{
            console.log("appParams:",state.dtData)
            try {
                H5CallAPPFuction('showAdVideo',JSON.stringify(state.dtData)) 
            } catch (error) {
                toast('调用app播放失败')
            }
        }

       const btnAdd = ()=>{
           state.popupType =true
           // addView.value.addAwaitRecord(state.popupCheck==1?7:31)
        }
                //弹出框事件
        const checkList=(type)=>{
            state.popupCheck = type
        }
        const popupConfim=()=>{
            addView.value.addAwaitRecord(state.popupCheck==1?7:31)
             state.popupType = false
        }
        const cancelConfim=()=>{
            state.popupType = false
        }
        const btnSetUp = ()=>{
            router.push({path:'/ad/setUp',query:{id:props.id,arLandmarkId:state.dtData.arLandmarkId,typeUrl:1}})
        }
        const btnUsufruct = ()=>{
            router.push({path:'/ad/usufruct',query:{id:props.id,arLandmarkId:state.dtData.arLandmarkId}})
        }
        const cancelUsufruct = ()=>{
              confirm({ text: 'Are you sure you want to cancel the transfer' }).then(() => {
                        store.dispatch('customer/cancelLessee',{
                             adPlaceId:props.id,
                            walletAddress:state.userInfo.walletAddress
                        }).then(res=>{
                            if(res.success){
                                toast('success')
                            }else{
                                toast(res.message)
                            }
                        })
              })
        }
        return{
            ...toRefs(state),
            formatAddress,
            lookVideo,
            addView,
            btnAdd,
            checkList,
            popupConfim,
            cancelConfim,
            btnSetUp,
            btnUsufruct,
            cancelUsufruct
        }
    }
}
</script>

<style lang="scss" scoped>
    .ads-dtData-content{
        display: flex;
        width: 100%;
        height: 100%;
        line-height: normal;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        // overflow: hidden;
        // overflow-x: auto;
        .scoll-view{
             display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling:touch;
            width: 100%;
           height: 96%;
        }
        .introduce{
            padding: 14px 0 15px 0;
            font-size:24px;
            &.introduce2{
                padding-bottom: 20px;
            }
        }
        .pricelocation{
            display: flex;
            height: 80px;
            align-items: center;
            .price{
                flex: 1;
                img{
                    display: block;
                    float: left;
                    width: 20px;
                    margin: 3px 10px 0 0;
                }
                b{
                    font-weight: 500;
                    color: #82FEF4;
                }
            }
            .location{
                i{
                    float: left;
                    font-size: 30px;
                    margin: 3px 10px 0 0;
                }
            }
        }
        .name{
            display: flex;
            align-items: center;
            font-size: 32px;
            span{
                display: block;
                height:34px;
                text-align: center;
                line-height: 34px;
                padding: 0 10px;
                background: rgba(103,248,255,0.2);
                border-radius: 17px;
                opacity: 1;
                border: 1px solid rgba(103,248,255,0.8);
                font-size: 14px;
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #67F8FF;
                margin: 0 0 0 12px;
            }
        }
        .ads-visits-box{
            margin: 10px 0 20px 0;
            padding: 20px 0 20px 0;
        }
        .ads-left-con{
            overflow: hidden;
            overflow-y: auto;
            padding: 20px;
            width: 560px;
            background-image: url(/images/gloabAdSplace/bg1.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .max-title{
                font-size:26px;
                color: #fff;
                padding-top:20px;
            }
            .name{
                color: #67F8FF;
                font-weight:600;
            }
            .place-view{
                display: flex;
                justify-content: flex-start;
                margin-bottom:20px;
                img{
                    height:72px;
                    width:72px;
                    vertical-align: middle;
                    margin-right:20px;
                }
                .city-title{
                  color: #ffffff50;
                  font-size:20px;
                }
                .city-name{
                  color: #82FEF4;
                  font-size:26px;
                }
            }
             .user-view{
                display: flex;
                padding: 5px 0;
                background: rgba(103,248,255,0.2000);
                justify-content: space-between;
                border:1px solid #67F8FF;
                position: relative;
                .line{
                    position: absolute;
                    width:1px;
                    height:60px;
                    left:50%;
                    top:50%;
                    margin-left:-5px;
                    margin-top:-30px;
                    background-color: #67F8FF;
                }
                .item{
                    width:50%;
                    text-align: center;
                }
                .title{
                    font-size:20px;
                    color:#ffffff50;
                }
                .dtname{
                    font-size:24px;
                    color:#67F8FF;
                }
             }
            .chiyou{
                display: flex;
                padding: 20px 0 0 0;
                .cyItem1{
                    padding: 0 20px 0 0;
                    flex-shrink: 0;
                }
                .cyItem2{
                    flex: 1;
                    flex-shrink: 0;
                }
            }
            .picon{
                display: flex;
                align-items: center;
                height: 60px;
                background: rgba(103,248,255,0.2000);
                padding: 0 20px;
                label{
                    color: #A5CEE9;
                }
                span{
                    flex: 1;
                    text-align: right;
                }
            }
            .vioc{
                padding: 20px 0;
            } 
        }
        .ads-right-con{
            width: 640px;
            padding: 20px;
            margin-left:30px;
            overflow: hidden;
            overflow-y: auto;
             background-image: url(/images/gloabAdSplace/bg2.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
                .weitou-view{
                    //padding: 90px 20px 20px 20px;
                    margin: 0;
                    list-style: none;
                    font-family: Poppins-Medium, Poppins;
                    font-weight: 500;
                    padding-bottom:10px;
                    .title{
                        font-size:26px;
                        color:#fff;
                    }
                    .item{
                        padding:10px 10px;
                        font-size:22px;
                        span{
                            padding-right:60px;
                        }
                        em{
                            color: #82FEF4;
                            font-size:20px;
                            span{
                                font-size:12px;
                                margin-left:2px;
                            }
                        }
                    }
         
                }
        }
    }

    .chain-info-dg-box{
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        .chain-info-wrap{
            position: relative;
            z-index: 100;
            width: 700px;
            height: 90%;
            overflow: hidden;
            background: url(/images/dtData/hb.png) left top no-repeat;
            background-size: 100% 100%;
            background-color: #023178;
            border-radius:40px ;
            padding: 90px 20px 40px 20px;
            .close{
                position: absolute;
                z-index: 100;
                right: 30px;
                top: 30px;
                font-size: 40px;
                color: #67F8FF;
            }
            .ciScrollBox{
                height: 100%;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }
    .propVisitsDgWrap{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        .propDgTitle{
            height: 60px;
            line-height: 60px;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 30px;
            em{
                font-style: normal;
                color: #7EE7FF;
                font-weight: 700;
            }
        }
        .propVisitsDgMain{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
        .btn-add{
            background-image: url(/images/add.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width:180px;
            height:60px;
            // position: absolute;
            // bottom:15px;
            // left: 20px;
            z-index:999;
            margin-top:20px;
            margin-right:20px;
            &.zh{
                background-image: url(/images/detail/add-zh.png); 
            }
        }
             .btn-lnieview{
            display: flex;
            justify-content: flex-start;
            .btn-usufruct,
            .cancel-usufruct,
            .btn-setUp,
            .btn-views{
                width: 160px;
                height:60px;
                background-image: url(/images/detail/viewAd.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin:20px 20px 0 0;
            }
            .btn-setUp{
                background-image: url(/images/detail/setup.png);
            }
             .btn-usufruct{
                background-image: url(/images/detail/usufruct.png);
                width:252px;
            }
            .cancel-usufruct{
                width:280px;
                 background-image: url(/images/detail/cancel-usufruct.png);
            }
        }
    .popup-view{
        min-height:360px;
        width:480px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-240px;
        margin-top:-180px;
         background-image: url(/images/dgbg11.png);
         background-position: center;
         background-size: 100% 100%;
         background-repeat: no-repeat;
         padding:40px;
         .title{
            color:#fff;
            font-size:24px;
            font-family: Poppins-Medium;
         }
         ul li{
            color: #67F8FF;
            font-size:24px;
            font-family: Poppins-Medium;
            padding-top:15px;
            display: flex;
            i{
                background-image: url(/images/adRelease/groud-no.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height:30px;
                width:30px;
                margin-right:20px;
            }
            i.on{
                background-image: url(/images/adRelease/groud-ok.png);
            }
         }
   
         .btn-view{
            display: flex;
            .btn-confim,
            .btn-cancel{
                 background-image: url(/images/adRelease/grid-cancel.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height:60px;
                width:160px;
                margin-left:20px;
                border: none;
                margin-top:20px;
            }
            .btn-confim{
                background-image: url(/images/adRelease/btn-confim.png);
            }
         }
    }
</style>